<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="vue.js"></script>
    <title>Document</title>
</head>
<body>
    <main id="app">
     <div>{{name |majuscule}}</div>
     <div>{{name2 | majuscule}}</div>
    </main>
    <main id="main">
       <div>{{name1 | lowercase}}</div>
       <div>{{name3 | lowercase}}</div>
    </main>
     <script>
         Vue.filter('lowercase',function(e){
             
             return e.toLocaleLowerCase()
              
              
         })
     var vue=new Vue({
         el:'#app',
         data:{
             name:'hello world',
             name2:'love'
            
         },
         filters:{
            majuscule:function(e){
               return  e.toUpperCase(e)
            }
         }
     })
     
     var vue =new Vue({
         el:'#main',
         data:{
            name1:'HELLO WORLD',
            name3:'LOVE'
         }
     })
     </script>
     
</body>
</html>